<template>
  <div class="user-center">
    <!-- 个人信息卡片 -->
    <div class="profile-card">
      <div class="avatar-container" @click="triggerAvatarUpload">
        <img :src="userInfo.avatar || defaultAvatar" alt="头像" class="avatar">
        <span class="avatar-hint">更换头像</span>
        <input type="file" ref="fileInput" accept="image/*" @change="handleAvatarUpload" style="display: none;">
      </div>
      <div class="user-info">
        <h2 class="nickname">
          {{ userInfo.nickname || '情绪记录者' }}
          <!-- 会员标识 -->
          <span v-if="isMember" class="member-badge">
            <span class="crown-icon">👑</span>
            会员
          </span>
          <button v-else class="member-button" @click="navigateTo('/member-center')">
            开通会员
          </button>
        </h2>
        <p class="phone">{{ maskPhone(userInfo.phone || '13812345678') }}</p>
      </div>
      <button class="edit-btn" @click="showEditModal = true">编辑资料</button>
    </div>

    <!-- 功能导航区 -->
    <div class="function-grid">
      <div class="function-card" @click="navigateTo('/diary')">
        <div class="icon">📔</div>
        <span>我的日记</span>
        <div class="badge">{{ diaryCount }}篇</div>
      </div>
      <div class="function-card" @click="navigateTo('/emotion-analysis')">
        <div class="icon">📊</div>
        <span>情绪报告</span>
        <div class="update-tag">更新</div>
      </div>
      <div class="function-card" @click="togglePrivacySettings">
        <div class="icon">🛡️</div>
        <span>隐私设置</span>
      </div>
      <div class="function-card" @click="navigateTo('/resources')">
        <div class="icon">⭐</div>
        <span>我的收藏</span>
      </div>
      <!-- 会员中心入口卡片 -->
      <div class="member-entry-card" @click="navigateTo('/member-center')">
        <div class="icon">👑</div>
        <span>会员中心</span>
        <div class="member-tag" v-if="!isMember">尊享权益</div>
      </div>
      <div class="function-card" @click="navigateTo('/about')">
        <div class="icon">❓</div>
        <span>帮助中心</span>
      </div>
      <div class="function-card logout" @click="confirmLogout">
        <div class="icon">🚪</div>
        <span>退出登录</span>
      </div>
    </div>

    <!-- 隐私设置展开区 -->
    <transition name="slide-down">
      <div v-if="showPrivacySettings" class="privacy-settings">
        <h3>隐私设置</h3>
        
        <!-- 日记隐私选项 -->
        <div class="privacy-section">
          <label>日记隐私</label>
          <div class="radio-group">
            <label class="radio-item">
              <input type="radio" v-model="privacyOptions.diaryPrivacy" value="private">
              <span>全部仅自己可见</span>
            </label>
            <label class="radio-item">
              <input type="radio" v-model="privacyOptions.diaryPrivacy" value="encrypted">
              <span>加密日记需二次密码</span>
            </label>
            <label class="radio-item">
              <input type="radio" v-model="privacyOptions.diaryPrivacy" value="part-public">
              <span>部分公开（仅倾诉区）</span>
            </label>
          </div>
        </div>

        <!-- 二次密码设置 -->
        <transition name="fade">
          <div v-if="privacyOptions.diaryPrivacy === 'encrypted'" class="privacy-section">
            <label>二次密码设置</label>
            <div class="password-input-container">
              <input 
                type="password" 
                v-model="privacyOptions.secondaryPassword" 
                placeholder="设置4-6位数字密码"
                maxlength="6"
                pattern="[0-9]{4,6}"
                class="password-input"
              >
              <button class="toggle-password" @click="showPassword = !showPassword">
                {{ showPassword ? '👁️' : '👁️‍🗨️' }}
              </button>
            </div>
          </div>
        </transition>

        <!-- 匿名倾诉设置 -->
        <div class="privacy-section">
          <div class="setting-row">
            <label>匿名倾诉设置</label>
            <label class="switch">
              <input type="checkbox" v-model="privacyOptions.allowComments">
              <span class="slider round"></span>
            </label>
            <span class="setting-desc">允许接收评论</span>
          </div>
        </div>

        <button class="save-btn" @click="savePrivacySettings">保存设置</button>
      </div>
    </transition>

    <!-- 数据统计区 -->
    <div class="stats-card">
      <h3 class="stats-title">我的情绪数据</h3>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">{{ emotionStats.totalDays }}</div>
          <div class="stat-label">累计记录天数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ emotionStats.consecutiveDays }}</div>
          <div class="stat-label">连续记录天数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ emotionStats.mostFrequentEmotion }}</div>
          <div class="stat-label">最常出现情绪</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ emotionStats.averageMood }}</div>
          <div class="stat-label">平均心情评分</div>
        </div>
      </div>
      
      <!-- 情绪分布展示 -->
      <div v-if="Object.keys(emotionStats.emotionDistribution).length > 0" class="emotion-distribution">
        <h4 class="distribution-title">情绪分布</h4>
        <div class="distribution-list">
          <div v-for="(count, emotion) in emotionStats.emotionDistribution" :key="emotion" class="distribution-item">
            <span class="emotion-name">{{ getEmotionLabel(emotion) }}</span>
            <span class="emotion-count">{{ count }}次</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部版权区 -->
    <footer class="footer">
      <p>© 2025 情绪日记 版权所有 | 
        <a href="#" class="footer-link">隐私政策</a> | 
        <a href="#" class="footer-link">用户协议</a>
      </p>
    </footer>

    <!-- 编辑资料弹窗 -->
    <transition name="modal">
      <div v-if="showEditModal" class="modal-overlay" @click="closeEditModal">
        <div class="modal-content" @click.stop>
          <h3>编辑资料</h3>
          <div class="form-group">
            <label>昵称</label>
            <input type="text" v-model="editForm.nickname" placeholder="请输入昵称">
          </div>
          <div class="form-group">
            <label>头像</label>
            <button class="upload-btn" @click="triggerAvatarUpload">上传头像</button>
          </div>
          <div class="modal-actions">
            <button class="cancel-btn" @click="closeEditModal">取消</button>
            <button class="confirm-btn" @click="saveProfileChanges">确定</button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 成功提示 -->
    <transition name="toast">
      <div v-if="showToast" class="toast">
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>

<script>
import userService from '../services/userService.js'
import authService from '../services/authService.js'

export default {
  name: 'UserCenterView',
  data() {
    return {
      // 用户信息
      userInfo: {
        nickname: '',
        phone: '',
        avatar: '',
        isMember: false,
        memberExpiryDate: null,
        email: ''
      },
      // 默认头像（莫兰迪色系）
      defaultAvatar: 'data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2280%22 height%3D%2280%22 viewBox%3D%220 0 80 80%22%3E%3Ccircle cx%3D%2240%22 cy%3D%2240%22 r%3D%2240%22 fill%3D%22%23D7C0AE%22%2F%3E%3Ctext x%3D%2240%22 y%3D%2250%22 font-size%3D%2224%22 text-anchor%3D%22middle%22 fill%3D%22%23EEE3CB%22%3E用户%3C%2Ftext%3E%3C%2Fsvg%3E',
      // 隐私设置选项
      privacyOptions: {
        diaryPrivacy: 'private',
        secondaryPassword: '',
        allowComments: true
      },
      // 情绪统计数据
      emotionStats: {
        totalDays: 0,
        mostFrequentEmotion: '暂无数据',
        averageMood: 0,
        consecutiveDays: 0,
        emotionDistribution: {}
      },
      // 日记数量
      diaryCount: 0,
      // 界面状态
      showPrivacySettings: false,
      showPassword: false,
      showEditModal: false,
      editForm: {
        nickname: ''
      },
      showToast: false,
      toastMessage: '',
      memberExpiryDate: null,
      isLoading: false
    }
  },
  computed: {
    // 计算会员状态
    isMember() {
      return this.userInfo.isMember || false
    },
    
    // 会员剩余天数
    memberDaysRemaining() {
      if (!this.userInfo.memberExpiryDate) return 0
      const end = new Date(this.userInfo.memberExpiryDate)
      const today = new Date()
      const diffTime = end - today
      return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    }
  },
  async mounted() {
    this.isLoading = true
    try {
      // 并行加载所有数据
      await Promise.all([
        this.loadUserData(),
        this.loadPrivacySettings(),
        this.loadEmotionStats()
      ])
    } catch (error) {
      console.error('加载用户中心数据失败:', error)
      this.showToastMessage('加载失败，请重试')
    } finally {
      this.isLoading = false
    }
  },
  
  async activated() {
    // 当组件被重新激活时（比如从其他页面返回），重新加载数据
    console.log('UserCenterView activated, reloading emotion stats')
    try {
      await Promise.all([
        this.loadUserData(),
        this.loadEmotionStats()
      ])
    } catch (error) {
      console.error('重新加载用户数据失败:', error)
    }
  },
  methods: {
    // 加载用户数据
    async loadUserData() {
      try {
        // 从后端加载用户数据
        const userData = await userService.getUserInfo()
        this.userInfo = {
          nickname: userData.nickname || '',
          phone: userData.phone || '',
          avatar: userData.avatar || '',
          isMember: userData.isMember || false,
          memberExpiryDate: userData.memberExpiryDate || null,
          email: userData.email || ''
        }
      } catch (error) {
        console.error('加载用户数据失败:', error)
        // 从localStorage获取备用数据
        const localData = authService.getCurrentUser()
        if (localData) {
          this.userInfo = {
            nickname: localData.nickname || '',
            phone: localData.phone || '',
            avatar: localData.avatar || '',
            isMember: localData.isMember || false,
            memberExpiryDate: localData.memberExpiryDate || null
          }
        }
      }
    },
    
    // 加载隐私设置
    async loadPrivacySettings() {
      try {
        // 从后端加载隐私设置
        const settings = await userService.getDiaryPrivacy()
        this.privacyOptions = {
          diaryPrivacy: settings.diaryPrivacy || 'private',
          secondaryPassword: settings.secondaryPassword || '',
          allowComments: settings.allowComments !== false // 默认允许评论
        }
      } catch (error) {
        console.error('加载隐私设置失败:', error)
        // 从本地加载备用设置
        this.privacyOptions = userService.loadLocalSettings()
      }
    },
    
    // 加载并计算情绪统计数据
    async loadEmotionStats() {
      try {
        // 从后端加载统计数据
        const stats = await userService.getUserStats()
        this.emotionStats = {
          totalDays: stats.totalDays || 0,
          mostFrequentEmotion: stats.mostFrequentEmotion || '暂无数据',
          averageMood: stats.averageMood || 0,
          consecutiveDays: stats.consecutiveDays || 0,
          emotionDistribution: stats.emotionDistribution || {}
        }
        this.diaryCount = stats.diaryCount || 0
      } catch (error) {
        console.error('加载情绪统计数据失败:', error)
        // 回退到本地计算
        const diaryEntries = localStorage.getItem('diaryEntries')
        if (diaryEntries) {
          try {
            const entries = JSON.parse(diaryEntries)
            if (entries && entries.length > 0) {
              this.calculateEmotionStats(entries)
            }
          } catch (e) {
            console.error('本地计算统计失败', e)
          }
        }
      }
    },
    
    // 初始化模拟数据（仅用于展示）
    initializeMockData() {
      // 创建一些模拟日记数据
      const mockEntries = [
        {
          id: '1',
          date: new Date().toISOString(),
          emotion: 'happy',
          moodScore: 8,
          content: '今天天气很好，心情也不错！'
        },
        {
          id: '2',
          date: new Date(Date.now() - 86400000).toISOString(), // 昨天
          emotion: 'calm',
          moodScore: 7,
          content: '平静的一天，读了一本好书。'
        },
        {
          id: '3',
          date: new Date(Date.now() - 172800000).toISOString(), // 前天
          emotion: 'anxious',
          moodScore: 5,
          content: '工作压力有点大，需要放松一下。'
        }
      ]
      
      // 只有在localStorage中没有日记数据时才创建模拟数据
      // 这样不会覆盖用户已有的真实数据
      if (!localStorage.getItem('diaryEntries')) {
        localStorage.setItem('diaryEntries', JSON.stringify(mockEntries))
        console.log('创建了模拟日记数据')
        // 计算并更新统计数据
        this.calculateEmotionStats(mockEntries)
      } else {
        // 使用已有的数据计算统计
        const existingEntries = JSON.parse(localStorage.getItem('diaryEntries'))
        this.calculateEmotionStats(existingEntries)
      }
    },
    
    // 计算情绪统计数据
    calculateEmotionStats(entries) {
      // 计算累计记录天数（去重）
      const uniqueDates = new Set()
      const emotions = []
      let totalMoodScore = 0
      let moodScoreCount = 0
      const emotionCounts = {}
      const allDates = []
      
      entries.forEach(entry => {
        // 提取日期部分（忽略时间）
        if (entry.date) {
          const date = new Date(entry.date)
          const dateKey = date.toDateString()
          uniqueDates.add(dateKey)
          allDates.push(date)
        }
        
        // 统计情绪
        if (entry.emotion) {
          emotions.push(entry.emotion)
          emotionCounts[entry.emotion] = (emotionCounts[entry.emotion] || 0) + 1
        }
        
        // 计算平均心情评分
        if (entry.moodScore) {
          totalMoodScore += parseFloat(entry.moodScore)
          moodScoreCount++
        }
      })
      
      // 计算统计数据
      this.emotionStats.totalDays = uniqueDates.size
      this.emotionStats.mostFrequentEmotion = this.findMostFrequent(emotions)
      this.emotionStats.averageMood = moodScoreCount > 0 ? (totalMoodScore / moodScoreCount).toFixed(1) : 0
      this.emotionStats.consecutiveDays = this.calculateConsecutiveDays(allDates)
      this.emotionStats.emotionDistribution = emotionCounts
      // 更新日记总数
      this.diaryCount = entries.length
    },
    
    // 计算连续记录天数
    calculateConsecutiveDays(dates) {
      if (!dates || dates.length === 0) return 0
      
      // 按日期排序（降序）
      const sortedDates = dates.sort((a, b) => b - a)
      
      // 转换为日期字符串进行比较
      const dateStrings = sortedDates.map(date => {
        const d = new Date(date)
        return d.toDateString()
      })
      
      // 去重
      const uniqueSortedDates = [...new Set(dateStrings)].map(str => new Date(str))
      
      let consecutiveDays = 1
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      
      // 检查是否包含今天
      const latestDate = new Date(uniqueSortedDates[0])
      latestDate.setHours(0, 0, 0, 0)
      
      const diffDays = Math.floor((today - latestDate) / (1000 * 60 * 60 * 24))
      
      // 如果最近记录不是今天或昨天，则连续记录为0
      if (diffDays > 1) return 0
      
      // 计算连续天数
      for (let i = 1; i < uniqueSortedDates.length; i++) {
        const current = new Date(uniqueSortedDates[i - 1])
        const prev = new Date(uniqueSortedDates[i])
        current.setHours(0, 0, 0, 0)
        prev.setHours(0, 0, 0, 0)
        
        const dayDiff = Math.floor((current - prev) / (1000 * 60 * 60 * 24))
        
        if (dayDiff === 1) {
          consecutiveDays++
        } else {
          break
        }
      }
      
      return consecutiveDays
    },
    
    // 查找出现最频繁的情绪
    findMostFrequent(arr) {
      if (!arr || arr.length === 0) return '暂无数据'
      
      const frequency = {}
      let maxFreq = 0
      let mostFrequent = ''
      
      arr.forEach(item => {
        frequency[item] = (frequency[item] || 0) + 1
        if (frequency[item] > maxFreq) {
          maxFreq = frequency[item]
          mostFrequent = item
        }
      })
      
      return this.getEmotionLabel(mostFrequent)
    },
    
    // 获取情绪中文标签
      getEmotionLabel(emotion) {
        const emotionLabels = {
          'happy': '开心',
          'sad': '悲伤',
          'angry': '愤怒',
          'anxious': '焦虑',
          'calm': '平静',
          'confused': '迷茫'
        }
        
        return emotionLabels[emotion] || emotion || '未知'
      },
      
      // 保存隐私设置
    async savePrivacySettings() {
      try {
        this.isLoading = true
        // 保存到后端
        await userService.setDiaryPrivacy(this.privacyOptions)
        // 同时保存到本地作为备用
        userService.saveLocalSettings(this.privacyOptions)
        this.showToastMessage('设置保存成功')
      } catch (error) {
        console.error('保存隐私设置失败:', error)
        this.showToastMessage('保存失败，请重试')
        // 即使后端失败，也保存到本地
        userService.saveLocalSettings(this.privacyOptions)
      } finally {
        this.isLoading = false
      }
    },
    
    // 显示提示消息
    showToastMessage(message) {
      this.toastMessage = message
      this.showToast = true
      setTimeout(() => {
        this.showToast = false
      }, 2000)
    },
    
    // 切换隐私设置显示
    togglePrivacySettings() {
      this.showPrivacySettings = !this.showPrivacySettings
    },
    
    // 跳转到指定页面
    navigateTo(route) {
      this.$router.push(route)
    },
    
    // 触发头像上传
    triggerAvatarUpload() {
      this.$refs.fileInput.click()
    },
    
    // 处理头像上传
    async handleAvatarUpload(event) {
      const file = event.target.files[0]
      if (!file) return
      
      try {
        this.isLoading = true
        const formData = new FormData()
        formData.append('avatar', file)
        
        // 调用后端API上传头像
        const result = await userService.uploadAvatar(formData)
        
        if (result && result.avatarUrl) {
          this.userInfo.avatar = result.avatarUrl
          // 更新本地缓存
          authService.updateUserInfo({ avatar: result.avatarUrl })
          this.showToastMessage('头像上传成功')
        } else {
          throw new Error('上传失败')
        }
      } catch (error) {
        console.error('头像上传失败:', error)
        this.showToastMessage('上传失败，请重试')
      } finally {
        this.isLoading = false
        // 清空文件输入，以便可以再次选择相同的文件
        event.target.value = ''
      }
    },
    
    // 关闭编辑弹窗
    closeEditModal() {
      this.showEditModal = false
      this.editForm.nickname = ''
    },
    
    // 保存资料修改
    async saveProfileChanges() {
      if (!this.editForm.nickname) {
        this.showToastMessage('昵称不能为空')
        return
      }
      
      try {
        this.isLoading = true
        
        // 准备更新数据
        const updateData = {
          nickname: this.editForm.nickname
        }
        
        // 调用后端API更新用户信息
        await userService.updateUserInfo(updateData)
        
        // 更新本地缓存的用户信息
        authService.updateUserInfo(updateData)
        
        // 更新当前组件中的用户信息
        this.userInfo.nickname = this.editForm.nickname
        
        this.showToastMessage('资料保存成功')
      } catch (error) {
        console.error('保存资料失败:', error)
        this.showToastMessage('保存失败，请重试')
      } finally {
        this.isLoading = false
        this.closeEditModal()
      }
    },
    
    // 确认退出登录
    async confirmLogout() {
      if (confirm('确定要退出登录吗？')) {
        try {
          // 调用后端退出登录接口
          await authService.logout()
          
          // 清除本地用户数据
          userService.clearUserData()
          
          // 跳转到登录页面
          this.$router.push('/auth')
        } catch (error) {
          console.error('退出登录失败:', error)
          // 即使失败也进行跳转
          this.$router.push('/auth')
        }
      }
    },
    
    // 匿名倾诉设置开关
    async toggleAnonymousConfession() {
      try {
        this.isLoading = true
        const newValue = !this.privacyOptions.allowComments
        await userService.updateAnonymousConfession(newValue)
        this.privacyOptions.allowComments = newValue
        this.showToastMessage(newValue ? '已开启匿名倾诉' : '已关闭匿名倾诉')
      } catch (error) {
        console.error('更新匿名倾诉设置失败:', error)
        // 回滚状态
        this.privacyOptions.allowComments = !this.privacyOptions.allowComments
        this.showToastMessage('设置失败，请重试')
      } finally {
        this.isLoading = false
      }
    },
    
    // 手机号脱敏处理
    maskPhone(phone) {
      if (!phone || phone.length < 8) return phone
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    
    // 显示加载状态
    showLoading() {
      this.isLoading = true
    },
    
    // 隐藏加载状态
    hideLoading() {
      this.isLoading = false
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.user-center {
  min-height: 100vh;
  background-color: #F9F9F9;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* 个人信息卡片 */
.profile-card {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.avatar-container {
  position: relative;
  cursor: pointer;
  margin-right: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #E5E5E5;
}

.avatar-hint {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #999;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.avatar-container:hover .avatar-hint {
  opacity: 1;
}

.user-info {
  flex: 1;
}

.nickname {
  font-size: 20px;
  color: #555;
  margin: 0 0 5px 0;
  font-weight: 500;
}

.phone {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.member-badge {
    display: inline-flex;
    
    align-items: center;
    background-color: #E1D5E7; /* 浅莫兰迪紫 */
    color: #5E35B1; /* 深莫兰迪紫 */
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 8px;
  }
  
  .crown-icon {
    font-size: 14px;
    margin-right: 4px;
  }
  
  .member-button {
    background-color: #E1D5E7; /* 浅莫兰迪紫 */
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 8px;
    transition: background-color 0.3s;
  }
  
  .member-button:hover {
    background-color: #D1B8E0; /* 稍深的莫兰迪紫 */
  }
  
  .edit-btn {
  background-color: #F5F5F5;
  color: #555;
  border: none;
  padding: 8px 16px;
  border-radius: 12px;
  width: 100px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.edit-btn:hover {
  background-color: #E8E8E8;
}

/* 功能导航区 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.function-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  display: flex;
  align-items: center;
}
  
  .member-center-card {
    border: 1px solid #E1D5E7; /* 莫兰迪紫边框 */
    background-color: rgba(225, 213, 231, 0.1); /* 浅莫兰迪紫背景 */
  }
  
  .member-center-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(179, 157, 219, 0.2); /* 莫兰迪紫阴影 */
  }
  
  .member-tag {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #B39DDB; /* 莫兰迪紫 */
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
  }

.function-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.function-card .icon {
  font-size: 24px;
  margin-right: 12px;
}

.function-card span {
  font-size: 16px;
  color: #666;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #F5F5F5;
  color: #666;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.update-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #94A7C8;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.function-card.logout span {
  color: #FF8787;
}

/* 隐私设置展开区 */
.privacy-settings {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.privacy-settings h3 {
  color: #555;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
}

.privacy-section {
  margin-bottom: 20px;
}

.privacy-section label {
  display: block;
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  margin-right: 10px;
}

.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  font-size: 14px;
}

.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-desc {
  font-size: 14px;
  color: #999;
}

/* 开关按钮 */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #94A7C8;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

.save-btn {
  background-color: #94A7C8;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  margin: 20px auto 0;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #8395B7;
}

/* 数据统计区 */
.stats-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.stats-title {
  color: #94A7C8;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
}

.stats-grid {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #94A7C8;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #999;
}

/* 底部版权区 */
.footer {
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;
}

.footer p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.footer-link {
  color: #94A7C8;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

/* 编辑资料弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
}

.modal-content h3 {
  color: #555;
  margin-top: 0;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  font-size: 14px;
}

.upload-btn {
  background-color: #F5F5F5;
  color: #555;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.cancel-btn {
  background-color: #F5F5F5;
  color: #555;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

.confirm-btn {
  background-color: #94A7C8;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

/* 成功提示 */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(148, 167, 200, 0.9);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 1001;
}

/* 过渡动画 */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.slide-down-enter-from,
.slide-down-leave-to {
  max-height: 0;
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-content,
.modal-leave-to .modal-content {
  transform: scale(0.9);
}

.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-center {
    padding: 15px;
  }
  
  .profile-card {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-container {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .avatar {
    width: 70px;
    height: 70px;
  }
  
  .edit-btn {
    margin-top: 15px;
  }
  
  .function-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .function-card {
    padding: 15px;
  }
  
  .stats-grid {
    flex-direction: column;
    gap: 15px;
  }
  
  .stat-item {
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
  }
  
  .stat-item:last-child {
    border-bottom: none;
  }
}
</style>